<template>
  <div :class="{'indexTable bgWhite customer expandTable': true, 'tableExpand': !isExpand}" ref="content">
   <el-form ref="form" class="pb_form ">
      <el-input v-model="searchForm.email.value " placeholder="邮箱" @keyup.enter.native="getTableList"></el-input>
      <el-input v-model="searchForm.truename.value " placeholder="姓名" @keyup.enter.native="getTableList"></el-input>
      <el-select  v-model="searchForm.subscription_status.value" placeholder="订阅状态" clearable  @keyup.enter.native="getTableList"  >
        <el-option v-for="item in statusList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select>
      <el-select  v-model="searchForm.status.value" placeholder="注册状态" clearable  @keyup.enter.native="getTableList"  >
        <el-option v-for="item in statusList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select>
       <el-select  v-model="searchForm.w_status.value" placeholder="Warranty状态" clearable  @keyup.enter.native="getTableList"  >
        <el-option v-for="item in statusList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select>
       <el-select  v-model="searchForm.b_status.value" placeholder="Tester状态" clearable  @keyup.enter.native="getTableList"  >
        <el-option v-for="item in statusList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select>
      <el-select  v-model="searchForm.country.value" placeholder="国家" clearable  @keyup.enter.native="getTableList"  @focus="getCountryListFunc" >
        <el-option v-for="item in countryList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select>
      <el-select  v-model="searchForm.purchased_item.value" placeholder="购买物品" clearable  @keyup.enter.native="getTableList"  >
        <el-option v-for="item in purchasedItemList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select>
      <el-input v-model="searchForm.order_no.value " placeholder="订单号" @keyup.enter.native="getTableList"></el-input>
      <el-select  v-model="searchForm.order_is_valid.value" placeholder="订单是否有效" clearable  @keyup.enter.native="getTableList"  >
        <el-option v-for="item in orderIsValidList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select>
      <el-select  v-model="searchForm.interested_testing.value" placeholder="感兴趣的产品" clearable  @keyup.enter.native="getTableList"  >
        <el-option v-for="item in interestedProductList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select>
      <TimeRangeInput :isClear="isClear" params="subscription_time" placeholder="订阅时间" @setData="setTimeRange"/>
      <TimeRangeInput :isClear="isClear" params="create_time" placeholder="注册时间" @setData="setTimeRange"/>
      <TimeRangeInput :isClear="isClear" params="wt_timestamp_opt" placeholder="Warranty时间" @setData="setTimeRange"/>
      <TimeRangeInput :isClear="isClear" params="bt_timestamp_opt" placeholder="Tester时间" @setData="setTimeRange"/>
      <TimeRangeInput :isClear="isClear" params="update_time" placeholder="更新日期" @setData="setTimeRange"/>
      <div class="isExpand" @click="isExpandForm">
        <p class="hide" v-show="isExpand">收起 <i class="iconfont icon-arrow_1"></i></p>
        <p class="expand" v-show="!isExpand">展开 <i class="iconfont icon-arrow_1"></i></p>
      </div>
    </el-form>
    <div class="btnContainer" ref="btn">
      <div>
        <el-button type="del" @click="sureCloseDialog('check')" v-if="$_has('/customer/set_order_audit')">订单审核</el-button>
        <el-button type="del" @click="closeExportDialog()" v-if="$_has('/customer/export')">导出</el-button>
      </div>
      <div>
        <el-button type="search" @click="getTableList" v-if="$_has('/customer/list')">查询</el-button>
        <el-button type="del" @click="resetForm">重置</el-button>
      </div>
    </div>
    <el-table :data="listTable" :height="tableH" :row-class-name="rowClassName" ref="table" @row-click="RowClick"
     @selection-change="handleSelectionChange" :row-key="function(row){return row.id}" v-loading="loading">
      <el-table-column type="selection" width="64"  fixed="left" :reserve-selection="true"></el-table-column>
      <el-table-column  label="邮箱" width="260" prop="email" align="left"></el-table-column>
      <el-table-column  label="姓名"  width="160"   prop="truename" align="left"></el-table-column>
      <el-table-column  label="订阅状态"  width="160"    align="left">
        <template slot-scope="scope" >
          <span v-if="scope.row.subscription_status ==1">订阅</span>
          <span v-else-if="scope.row.subscription_status ==2">取消订阅</span>
        </template>
      </el-table-column>
      <el-table-column  label="注册状态"  width="160"   align="left">
        <template slot-scope="scope" >
          <span v-if="scope.row.status ==1">订阅</span>
          <span v-else-if="scope.row.status ==2">取消订阅</span>
        </template>
      </el-table-column>
     
      <el-table-column  label="Warranty状态"   width="160"   >
        <template slot-scope="scope" >
          <span v-if="scope.row.w_status ==1">订阅</span>
          <span v-else-if="scope.row.w_status ==2">取消订阅</span>
        </template>
      </el-table-column>
      <el-table-column  label="Tester状态"  width="160"  align="left">
        <template slot-scope="scope" >
          <span v-if="scope.row.b_status ==1">订阅</span>
          <span v-else-if="scope.row.b_status ==2">取消订阅</span>
        </template>
      </el-table-column>
      <el-table-column  label="国家"  width="224"  prop="country" align="left"></el-table-column>
      <el-table-column  label="购买物品"  width="296"   prop="purchased_item" align="left"></el-table-column>
      <el-table-column  label="订单号" width="200"  prop="order_no" > </el-table-column>
      <el-table-column  label="订单是否有效"  width="160" prop="order_is_valid" >
        <template slot-scope="scope" >
          <span v-if="scope.row.order_is_valid == 1">有效</span>
          <span v-else-if="scope.row.order_is_valid ==2">无效</span>
          <span v-else-if="scope.row.order_is_valid == 0"></span>

        </template>
      </el-table-column>
      <el-table-column  label="感兴趣的产品" width="200"  prop="interested_testing" > </el-table-column>
      <el-table-column  label="订阅时间" width="200"  prop="subscription_time" > </el-table-column>
      <el-table-column  label="注册时间" width="200"  prop="create_time" ></el-table-column>
      <el-table-column  label="Warranty时间" width="200"  prop="wt_timestamp_opt" > </el-table-column>
      <el-table-column  label="Tester时间" width="200"  prop="bt_timestamp_opt" > </el-table-column>
      <el-table-column  label="更新时间" width="200"  prop="update_time" ></el-table-column>
    </el-table>
    <el-pagination ref="pagination" background :page-sizes="pageSizes" :total="total"  :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"  @size-change="handleSizeChange" :current-page="page"
      @current-change="handleCurrentChange"></el-pagination>
    <OrderCheck v-show="checkShow" :idList="curList" :show="checkShow" @closeDialog="closeCheckDialog"></OrderCheck>
    <Export v-show="exportShow" :show="exportShow" @closeDialog="closeExportDialog"></Export>
  </div>
</template>

<script>
import { Export, OrderCheck } from './components'
import { customerList,getCountryList } from '@/api/customer/customer.js'
import { setSearchParams } from '@/utils/index.js'
import {  nameEnList } from '@/api/manage/site.js'
import TimeRangeInput from '@/components/timeRangeInput.vue'
export default {
  name: 'customer',
  data() {
    return {
      searchForm: {
        email: { value: '', op: 'like' },
        truename: { value: '',op: 'like' },
        w_status: { value: '',op: '=' }, //warranty状态
        b_status: { value: '',op: '=' }, //tester状态
        status: { value: '',op: '=' }, //注册状态
        country: { value: '', op: '=' },
        purchased_item: { value: '', op: '=' },
        order_no: {value: '', op: 'like'},
        order_is_valid: {value: '', op: '='},
        interested_testing: {value: '', op: '='},

        subscription_status: {value: '', op: '='}, //订阅状态

        subscription_time:  { value: '', op: 'RANGE' }, // 订阅时间
        create_time:  { value: '', op: 'RANGE' }, //注册时间
        update_time:  { value: '', op: 'RANGE' },
        wt_timestamp_opt:  { value: '', op: 'RANGE' }, //warranty时间
        bt_timestamp_opt:  { value: '', op: 'RANGE' }, //tester时间
      },
      yesNOList: [
        {value: 'Yes', label: 'Yes'},
        {value: 'No', label: 'No'},
      ],
      statusList: [
        {value: 1, label: '订阅'},
        {value: 2, label: '取消订阅'},
      ],
      orderIsValidList: [
        {value: 1, label: '有效'},
        {value: 2, label: '无效'},
      ],
      interestedProductList:[
        {value: 'Baby monitor', label: 'Baby monitor'},
        {value: 'Video doorbell', label: 'Video doorbell'},
        {value: 'Smart curtain robot', label: 'Smart curtain robot'},
        {value: 'Just bonoch', label: 'Just bonoch'},
      ],
      levelList: [
        {value: '初级会员', label: '初级会员'},
        {value: 'Warranty', label: 'Warranty'},
        {value: 'Beta Tester', label: 'Beta Tester'},
      ],
      countryList: [ ],
      purchasedItemList: [
        {value:'DisplayPort Cable', label: 'DisplayPort Cable'},
        {value: 'Mini DisplayPort Adapter / Cable', label: 'Mini DisplayPort Adapter / Cable'},
        {value: 'HDMI Cable', label: 'HDMI Cable'},
        {value: 'USB-C Adapter / Cable', label: 'USB-C Adapter / Cable'},
        {value: 'Optical Cable', label: 'Optical Cable'},
        {value: 'Aux Cable', label: 'Aux Cable'},
        {value: 'USB-C Docking Station', label: 'USB-C Docking Station'},
        {value: 'USB-C Hub', label: 'USB-C Hub'},
      ],
      listTable: [  ],
      pageSizes: [20, 50, 100],
      total: 10,
      pageSize: 20,
      page: 1,
      exportShow: false,
      checkShow: false,
      curList: [],
      siteList: [], //站点下拉框
      nameEnList: [] ,// 国家英文名下拉框
      nameCnList: [] ,// 国家种文名下拉框
      curId: null,
      tableH: null,
      curIdList: [],
      selectList: [],
      loading: false,
      isExpand: false,
      emailIsValidList:[
        {value: '1', label: '有效'},
        {value: '2', label: '无效'},
      ],
      isClear: false
    }
  },
  created(){
    this.getTableList()
  },
  mounted(){
    let that = this;
    that.setTableHeight()
    // 注：window.onresize只能在项目内触发1次
    window.onresize = function windowResize () {
        // 通过捕获系统的onresize事件触发我们需要执行的事件
      that.setTableHeight()
    }
  },
  methods: {
    getCountryListFunc (){
      getCountryList().then(res=>{
        this.countryList = res.data

      })
    },
    setTimeRange(params ,str){
      this.searchForm[params].value = str
      this.getTableList()
    },

    isExpandForm () {
      this.isExpand = !this.isExpand
      if(this.isExpand ) {
        this.tableH = parseInt(this.tableH) - 43 + 'px'
      }else {
        this.tableH = parseInt(this.tableH) + 43 + 'px'
      }

    },
    RowClick (row) {
      this.$refs.table.toggleRowSelection(row);
    } ,
    setTableHeight(){
      let searchFormH = this.$refs.form.$el.offsetHeight;
      let manageMenuH = this.$refs.content.offsetHeight;
      let btnContainerH = this.$refs.btn.offsetHeight;
      let paginationH = this.$refs.pagination.$el.offsetHeight
      let tableHeight = manageMenuH  - btnContainerH - searchFormH - paginationH - 48 - 24 - 24
      this.tableH = tableHeight +'px' 
    },
    sureCloseDialog(type){
      if(this.curList.length > 0){
       if( type == 'check'){
          this.closeCheckDialog()
        }
       
      } else {
        let word = "订阅"
        if( type == 'check'){
          word = '订单审核'
        }
        this.$message.error('请选择需' + word + '的选项！')
      }
      
    },
    getTableList(){
      this.loading = true
      let params = setSearchParams(this.searchForm, this.pageSize, this.page)
      customerList(params).then(res=>{
        let list = res.data.data
        if( list.length == 0 && this.page > 1){
          this.page -= 1
          this.getTableList()
        }
        let idList = []
        for(let i = 0; i < list.length; i++){
          if(list[i].status == 1) {
            list[i].statusBoolean = true
          } else {
            list[i].statusBoolean = false
          }
          idList.push(list[i].id)
        }
        this.curIdList = idList
        this.listTable = list
        this.total = res.data.total
        this.page = res.data.current_page
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getTableList()
     
    },
    handleCurrentChange(val) {
      this.page = val
      this.getTableList()
      this.$refs.table.clearSelection()
    },
    setCurRow(row, type) {
      this.curList = []
      this.curList.push(row.id)
      this.curId = row.id

      if(type == 'check'){ 
        this.closeCheckDialog()  
      }
      
    },
    closeCheckDialog () {
      this.checkShow = !this.checkShow
      if(!this.checkShow){
        this.getTableList()
      }
    },
    closeExportDialog(){
      this.exportShow = !this.exportShow
      if(!this.exportShow){
        this.getTableList()
      }
    },
    rowClassName({row}){
      let rowClass = "tableRowClass"
       if(row.statusSelection){
        rowClass += ' selectRow'
      }
      return rowClass
    },
    handleSelectionChange(list){
      let array = []
      for(let i = 0; i < list.length; i++ ){
        array.push(list[i].id)
      }
      this.curList = array

      // 选中行的样式赋值
      for(let i in this.selectList){
        this.selectList[i].statusSelection = false
      }
      for (let item in list){
        list[item].statusSelection = true
      }
      this.selectList = list
    },
     // 重置按钮
    resetForm(){
      for(let item in this.searchForm){
        this.searchForm[item].value =""
      }
      this.isClear = !this.isClear
  
    
      this.getTableList()
    },
    getNameEnList(){ // 国家英文名称
      nameEnList().then(res=>{
        this.nameEnList = res.data
      })
    },
  },
  components: { Export, OrderCheck, TimeRangeInput }

}
</script>

<style lang="scss">
@import '@/styles/customer/customer.scss';



</style>